<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>

<html>
<head>
	<title>Left Sidebar - Arcana by HTML5 UP</title>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<!--[if lte IE 8]><script src="css/ie/html5shiv.js"></script><![endif]-->
		<script src="/js/jquery.min.js"></script>
		<script src="/js/jquery.dropotron.min.js"></script>
		<script src="/js/skel.min.js"></script>
		<script src="/js/skel-layers.min.js"></script>
		<script src="/js/init.js"></script>
		<script src="/js/bootstrap.min.js"></script>
		<noscript> 
			<link rel="stylesheet" href="/css/skel.css" />
			<link rel="stylesheet" href="/css/style.css" />
			<link rel="stylesheet" href="/css/style-wide.css" />
		</noscript>
		
		<!--[if lte IE 8]><link rel="stylesheet" href="css/ie/v8.css" /><![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- css 영역 -->
<!-- javascript 영역-->
<script type="text/javascript">
$(function () {
//화면 시작할때 호출되는 Function입니다.
	var lessonProTable = function(){									// 레슨 프로 리스트 추출
		var params={
				
		};	
	
		$.ajax({
			url : "/intro/ajax/selectLessonProInfoList.do"
		   ,type : "POST"
		   ,dataType : "json"
		   ,data : params
		   ,success : function(data){
		       $('#table_data > tbody').empty();
			       $.each(data.resultMap1, function(idx, sData){
			    	   var proExp = (sData.pro_exp).replace(/,/g,"<br>");					// 경력사항의 , 를 <br>로 변경
			    		/*var dataTr = $('<tr>'
			    				+'<td rowspan=5>'
			    				+'<input type="hidden" name="pro_idx" value='+ sData.pro_idx +'>' 
			    				+"<img src='"+ sData.pro_img+"'/></td>"				
			    				+'</tr><tr>'
			    				+'<td>프로 이름</td>'
				    			+'<td>' + sData.pro_name + '</td>'
			    				+'</tr>'
			    				+'<tr>'
				    			+'<td>출생</td>'
				    			+'<td>' + sData.pro_birth + '</td>'
				    			+'</tr>'
				    			+'<tr>'
				    			+'<td>신체</td>'
				    			+'<td>' + sData.pro_health + '</td>'
				    			+'</tr>'
				    			+'<tr>'
				    			+'<td>경력 사항</td>'
				    			+'<td>' + proExp + '</td>'
				    			+'</tr>');*/
				    			var dataTr = $('<tr>'
			    				+"<td height='100px'>"
			    				+'<input type="hidden" name="pro_idx" value='+ sData.pro_idx +'>' 
			    				+"<img src='"+ sData.pro_img+"'/></td>"				
			    				+"<td height='100px'>"
			    				+"<table border='1px'>"
			    				+'<tr>'
			    				+'<td>'
			    				+'프로 이름</td>'
				    			+'<td>' + sData.pro_name + '</td>'
			    				+'</tr>'
			    				+'<tr>'
				    			+'<td>출생</td>'
				    			+'<td>' + sData.pro_birth + '</td>'
				    			+'</tr>'
				    			+'<tr>'
				    			+'<td>신체</td>'
				    			+'<td>' + sData.pro_health + '</td>'
				    			+'</tr>'
				    			+'<tr>'
				    			+'<td>경력 사항</td>'
				    			+'<td>' + proExp + '</td>'
				    			+'</table></td></tr>');
				    			alert(dataTr);
		         	   $('#table_data').append(dataTr);							
			    	});   
		       
		   }
			   
		});
	}
	 lessonProTable(); 
	
});

</script>
</head>
<body>
		<!-- Main -->
			<section class="wrapper style1">
				<div class="container">
					<div class="row double">
						<div class="4u">
							<div id="sidebar">

								<!-- Sidebar -->
							
									<section>
										<h3>Sunny Golf Academy</h3>
										<p>Sunny Golf Academy는 스윙이나 기술 중심의 레슨이 아닙니다.<br>
										 혼자서도 쉽게 할 수 있는 연습방법을 가르칩니다.<br>
										 초보자든 싱글 골퍼든 스윙에 대한 한 점의 의혹도 없어야 하며 <br> 생각이 단순해진다는
										믿음으로 이해하고 납득될 때까지 충분히 설명합니다.
										</p>
										<footer>
											<a href="#" class="button">Q&A to LessonPro</a>
										</footer>
									</section>

									<section>
										<h3>Announcement</h3>
										<ul class="links">
											<li><a href="#">최근 회원 영상</a></li>
											<li><a href="#">회원 폼 본받기</a></li>
											<li><a href="#">금주 주의해야 할 자세</a></li>
											<!-- <li><a href="#">Consequat etiam lorem phasellus</a></li>
											<li><a href="#">Amet turpis, feugiat et sit amet</a></li>
											<li><a href="#">Semper mod quisturpis nisi</a></li> -->
										</ul>
										<footer>
											<a href="#" class="button">More Random Links</a>
										</footer>
									</section>
							</div>
						</div>
						<div class="8u skel-cell-important">
							<div id="content">

								<!-- Content -->
							
									<article>
										<header>
											<h2>레슨 프로 이력</h2>
											<p>Lesson Pro Profile.</p>
										</header>
											<table id="table_data" border="1">
											</table>
									</article>
							</div>
						</div>
					</div>
				</div>
			</section>	
			
			
</body>
</html>
